<template>
  <div class="home">
     
      <div class="h-banner">
        <div class="block">
          <el-carousel height="455px">
            <el-carousel-item>
              <h3 class="small">
                  <img src="./assets/img/banner1.jpg" alt="">
              </h3>
            </el-carousel-item>
              <el-carousel-item>
              <h3 class="small">
                  <img src="./assets/img/banner2.jpg" alt="">
              </h3>
            </el-carousel-item>
              <el-carousel-item>
              <h3 class="small">
                  <img src="./assets/img/banner3.jpg" alt="">
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <div class="h-content">
        <div class="header">
           <p class="one">产品介绍</p>
           <p class="two">product description</p>
           <p></p>
        </div>

         <div class="h-icon">
          <div class="icon1">
            <div class="bg"></div>
            <p class="text1">无抵押贷款</p>
            <p class="text2">无需抵押 | 最高可贷5万 | 快至3分钟放款</p>
            <p class="text3">了解更多</p>
          </div>
          <div class="icon1">
            <div class="bg bg1"></div>
            <p class="text1">有抵押贷款</p>
            <p class="text2">需抵押 | 最高可贷50万 | 快至2小时放款</p>
            <p class="text3">了解更多</p>
          </div>
          <div class="icon1">
            <div class="bg bg2"></div>
            <p class="text1">理财产品</p>
            <p class="text2">收益率高 | 收益稳健 | 配置灵活</p>
            <p class="text3">了解更多</p>
          </div>
         </div>

          <div class="header">
           <p class="one">贷款流程</p>
           <p class="two">Credit Flow</p>
           <p></p>
        </div>

          <div class="liucheng">
            <div class="context">
              <div class="bg bg1"></div>
              <p class="text">贷款申请</p>
            </div>
            <p class="jiantou">></p>

          <div class="context">
              <div class="bg bg2"></div>
             <p class="text">面签评估</p>
            </div>
             <p class="jiantou">></p>
             <div class="context">
              <div class="bg bg3"></div>
              <p class="text">审核批贷</p>
            </div>
             <p class="jiantou">></p>
             <div class="context">
              <div class="bg bg4"></div>
              <p class="text">抵押登记</p>
            </div>
             <p class="jiantou">></p>

             <div class="context">
              <div class="bg bg5"></div>
             <p class="text">发放贷款</p>
            </div>
           
        </div>

      </div>

      <div class="dianti">
         <div class="bg">
            <img src="./assets/img/h_content.jpg" alt="">
         </div>
         <div class="block">
            <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :type="activity.type"
                  :size="activity.size"
                  :timestamp="activity.timestamp">
                  {{activity.content}}
                </el-timeline-item>
              </el-timeline>
        </div>

      </div>

    <div class="f-banner">
        <div class="header">
          <p class="one">团队风采</p>
          <p class="two">team presence</p>
          <p></p>
        </div>
        <div class="sider"> 
          <el-carousel :interval="4000" type="card" height="220px">
            <el-carousel-item>
              <h3 class="medium">
                <img src="./assets/img/h_sider1.png" alt="">
              </h3>
            </el-carousel-item>
              <el-carousel-item>
              <h3 class="medium">
                <img src="./assets/img/h_sider2.png" alt="">
              </h3>
            </el-carousel-item>
              <el-carousel-item>
              <h3 class="medium">
                <img src="./assets/img/h_sider3.png" alt="">
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>
        <p class="text3">更多风采</p>
    </div>
    <div class="header">
        <p class="one">合作伙伴</p>
        <p class="two">Partner</p>
        <p></p>
    </div>
    <div class="l_box5" >
          <ul class="ul1">
              <li class="li1"></li>
              <li class="li2"></li>
              <li class="li3"></li>
              <li class="li4"></li>
              <li class="li5"></li>
          </ul>
          <ul class="ul2">
            <li class="li1"></li>
            <li class="li2"></li>
            <li class="li3"></li>
            <li class="li4"></li>
            <li class="li5"></li>
          </ul>
        </div>

    
    <MyFoot></MyFoot>
  </div>
</template>

<script>


export default {

data() {
      return {
        activities: [{
          content: '2014',
          color:'white'
        }, {
          content: '2015',
          color: '#ffffff'
        }, {
          content: '2016',
          // icon: 'el-icon-more',
             size: 'large',
          type: 'primary',
          size: 'large'
        }, {
          content: '2017',
        
        },
        {
          content: '2018',
      
        }
        ]
      };
    }
}

</script>


<style lang="scss" scoped>
 .home{
   width: 100%;
   background: #ffffff;
overflow: hidden;
   .h-content{
    
     .h-icon{
       padding-top:100px;
       width: 1200px;
       margin: 0 auto;
       display: flex;
       font-family: MicrosoftYaHei;
       text-align: center;
         
       .icon1{
         flex: 1;
      .bg{
        height: 50px;
        width: 50px;
        margin: 0 auto;
        background-image:url(./assets/img/sp1.png);
        background-repeat: no-repeat;
        
       }
       .bg1{
          background-position:0 -50px;
       }
        .bg2{
          background-position: 0 -100px;
       }
       }
       .text1{
         font-size: 24px;
         color: #333333;
          margin: 10px 0;
       }
       .text2{
         color:#666666;
         font-size: 12px;
         margin: 10px 0;
       }
       .text3{
         width: 130px;
         height: 30px;
         line-height: 30px;
         border-radius: 15px;
         border: 1px solid #0887F8;
         margin: 10px auto;
       }
     }
     .liucheng{
        .jiantou{
          line-height: 80px;
          font-size: 20px;
        }
     padding-top: 50px;
     text-align: center;
       width: 1200px;
       margin: 0 auto;
       display: flex;
        .context{
        flex: 1;
        .bg{
          height: 80px;
          width: 80px;
          border: 1px solid #0B89F8;
          border-radius: 50%;
          margin: 0 auto;
          background: url(./assets/img/sp1.png) no-repeat;
        }
        .bg1{
          background-position: 15px -140px;
        }
        .bg2{
          background-position: 15px -235px;
        }
        .bg3{
          background-position: 15px -334px;
        }
        .bg4{
          background-position: 15px -430px;
        }
        .bg5{
          background-position: 15px -535px;
        }
        .text{
          font-size: 20px;
          color:#333333;
          margin-top: 10px;
        }
       
      }  
     }
    
   }
  .dianti{
    margin-top: 50px;
    position: relative;
     .bg{
        img{
          display: block;
          height: 450px;
          width: 100%;
        }
        
     }
     .block{
       position: absolute;
        left: 40%;
        top: 50%;
        transform: translate(-50%,-50%);
        .el-timeline-item__content{
          color: #ffffff !important; 
        }
     }
  }

  .f-banner{
    width: 1200px;
    margin: 0 auto;
     .header{
      text-align: center;
      margin-top: 40px;
      margin-bottom: 15px;
      .one{
        font-family: 'MicrosoftYaHei';
        font-size:  25px;
        margin-top: 9px;
      }
      .two{
        font-family: 'ArialMT';
        font-size:  12px;
        margin-top:12px;
      }
    }
  
     .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    .medium{
      height: 220px;
      width: 500px;
    }
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  }

  .text3{
     width: 130px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      border: 1px solid #0887F8;
      margin: 10px auto;
      text-align: center;
  }
  .l_box5{
    overflow: hidden;
        width: 1000px;
        height: 160px;
        margin:0 auto;
        .ul1{
            position: relative;
           
              height: 80px;
            .li1{
                width:190px;
                height:80px;
                border-radius:6px;
                background: url(./assets/img/sp2.jpg) no-repeat;
                list-style: none;
                position: absolute;
                left: 10px;
            }
            .li2{
                width:190px;
                height:80px;
                border-radius:6px;
                background: url(./assets/img/sp2.jpg) no-repeat;
                background-position: -218px;
                background-position-y:5px; 
                list-style: none;
                position: absolute;
                left: 217px;
            }
             .li3{
                width:190px;
                height:80px;
                border-radius:6px;
                background: url(./assets/img/sp2.jpg) no-repeat;
                background-position: -418px;
                  background-position-y:5px; 
                list-style: none;
                position: absolute;
                left: 412px;
            }
              .li4{
                width:190px;
                height:80px;
                border-radius:6px;
                background: url(./assets/img/sp2.jpg) no-repeat;
                background-position: -618px;
                  background-position-y:5px; 
                list-style: none;
                position: absolute;
                left: 612px;
            }
              .li5{
                width:190px;
                height:80px;
                border-radius:6px;
                background: url(./assets/img/sp2.jpg) no-repeat;
                background-position: -818px;
                  background-position-y:5px; 
                list-style: none;
                position: absolute;
                left: 812px;
            }
        }
         .ul2{
            position: relative;
           
              height: 80px;
            .li1{
                width:190px;
                height:80px;
                border-radius:6px;
                background: url(./assets/img/sp2.jpg) no-repeat;
                list-style: none;
                  background-position-y:-77px; 
                position: absolute;
                left: 10px;
            }
            .li2{
                width:190px;
                height:80px;
                border-radius:6px;
                background: url(./assets/img/sp2.jpg) no-repeat;
                background-position: -218px;
                  background-position-y:-77px; 
                list-style: none;
                position: absolute;
                left: 217px;
            }
             .li3{
                width:190px;
                height:80px;
                border-radius:6px;
                background: url(./assets/img/sp2.jpg) no-repeat;
                background-position: -418px;
                  background-position-y:-77px; 
                list-style: none;
                position: absolute;
                left: 412px;
            }
              .li4{
                width:190px;
                height:80px;
                border-radius:6px;
                background: url(./assets/img/sp2.jpg) no-repeat;
                background-position: -618px;
                  background-position-y:-77px; 
                list-style: none;
                position: absolute;
                left: 612px;
            }
              .li5{
                width:190px;
                height:80px;
                border-radius:6px;
                background: url(./assets/img/sp2.jpg) no-repeat;
                background-position: -818px;
                  background-position-y:-77px; 
                list-style: none;
                position: absolute;
                left: 812px;
            }
        }
    }

  
 }
   .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    height: 575px;
    line-height: 575px;
    margin: 0;
    img{
      width: 100%;
    }
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  .small{
    img{
      height: 455px;
    }
  }


    .header{
      text-align: center;
      margin-top: 40px;
      .one{
        font-family: 'MicrosoftYaHei';
        font-size:  25px;
        margin-top: 9px;
      }
      .two{
        font-family: 'ArialMT';
        font-size:  12px;
        margin-top:12px;
      }
    }
  



  
</style>